<!-- 寄件视图 -->
<template>
  <div class="title">
    <div class="head-wrap">
      <a href="">
        <img class="logo" :src="logoUrl" alt="home" />
      </a>
      <div id="out">
        <div>
          <div>
            <div class="inner-nav"><a href="/home">首页</a></div>
            <div class="inner-nav"><a href="#">物流服务</a></div>
            <div class="inner-nav"><a href="#">智慧科技</a></div>
            <div class="inner-nav"><a href="#">服务支持</a></div>
            <div class="inner-nav"><a href="#">可持续发展</a></div>
            <div class="inner-nav"><a href="#">投资者关系</a></div>
            <div class="inner-nav"><a href="#">关于我们</a></div>
          </div>
        </div>
        <div>欢迎您：{{ email }}</div>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="sidebar">
      <el-row class="tac">
        <el-col :span="26">
          <el-menu
            router
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :default-active="activeMenuIndex"
            text-color="#fff"
            :default-openeds="['1']"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>我要寄件</span>
              </template>
              <el-menu-item index="/ship/send/normal">寄快递</el-menu-item>
              <el-menu-item index="1-2">批量寄</el-menu-item>
              <el-menu-item index="1-3">寄大件</el-menu-item>
              <el-menu-item index="1-4">二维码寄件</el-menu-item>
              <el-menu-item index="1-5">同城急送</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/ship/check">
              <el-icon><icon-menu /></el-icon>
              <span>运单查询</span>
            </el-menu-item>
            <el-menu-item index="3">
              <el-icon>
                <document />
              </el-icon>
              <span>服务查询</span>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon>
                <setting />
              </el-icon>
              <span>我的资料</span>
            </el-menu-item>
            <el-menu-item index="/ship/feedback">
              <el-icon>
                <InfoFilled />
              </el-icon>
              <span>问题反馈</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>

    <router-view></router-view>
  </div>
  <div>
    <Bottom></Bottom>
  </div>
</template>

<script setup lang="ts">
import Bottom from "@/components/Bottom.vue";
import { logoUrl } from "@/common/common";

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  InfoFilled,
} from "@element-plus/icons-vue";
import { ref, onMounted, computed } from "vue";
import { useRoute } from "vue-router";
import { useAuthStore } from "@/store/userInfo";
const authStore = useAuthStore();
const route = useRoute();
const email = ref<string>("");
const activeMenuIndex = computed(() => {
  return route.path;
});

onMounted(() => {
  console.log("activePath = ",activeMenuIndex.value);
  if (authStore.email !== "") {
    email.value = authStore.email;
  }
});
</script>

<style scoped lang="less">
@font-face {
  font-family: "iconfont";
  /* Project id 4410292 */
  src: url("//at.alicdn.com/t/c/font_4410292_0pr074erb58d.woff2?t=1706444958188")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_4410292_0pr074erb58d.woff?t=1706444958188")
      format("woff"),
    url("//at.alicdn.com/t/c/font_4410292_0pr074erb58d.ttf?t=1706444958188")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 2.5rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.title {
  height: 10vh;
  width: 100%;
  box-shadow: 0 0 0.8px;

  .head-wrap {
    width: 100%;
    height: 100%;
    display: flex;

    .logo {
      width: 4rem;
      height: 4rem;
      margin-left: 1rem;
      margin-top: 1.3vh;
      object-fit: cover;
    }

    #out {
      width: 95%;
      height: 100%;

      display: flex;
      justify-content: space-between;

      > div:first-child {
        flex: 4;

        display: flex;
        justify-content: flex-start;

        > div:first-child {
          width: 60%;

          display: flex;
          justify-content: space-evenly;
          align-items: center;

          .inner-nav {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.9rem;

            a {
              text-decoration: none;
              color: black;

              &:hover {
                color: red;
              }
            }
          }
        }
      }

      > div:nth-child(2) {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.main {
  display: flex;
  background-color: #eff1f4;
}

.sidebar {
  position: relative;
  width: 10%;
  height: 85vh;
  margin-top: 1.4vh;
  margin-left: 5vw;
  // left: 25vw;
  background-color: white;

  

  .tac {
    width: 100%;
    position: absolute;
  }
  .el-row.tac {
    justify-content: center;
    align-items: center;
}
.el-col.el-col-26 {
  width: 100%;
}
}
</style>
